<template>

  <div class="recharge">
    
    <div class="recharge_shell">
      <p class="recharge_subtit">请选择充值的金额：</p>
      <div class="recharge_main" v-for="item in list">
        <div>
          <input type="radio" v-bind:id="item.id" v-bind:value="item.id" v-model="pick">
          <label v-bind:for="item.id">{{item.money}}元</label>
        </div>
      </div>

      <div v-html="present" class="recharge_give"></div>

    </div>

    <div class="recharge_buy">
      <div class="recharge_buy_subtit">合计</div>
      <div class="recharge_buy_all">
        总需支付：<span>{{total}}元</span>
      </div>
      <button class="recharge_btn" @click="pay">立即支付</button>
    </div>

  </div>
  
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'recharge',
  data () {
    return {
      pick: '',
      present: '无',
      total: 0,
      list: [],
    }
  },
  mounted(){
    this.getInfo();
    this.$root.share();
  },
  methods: {
    // 立即支付
    pay () {

      var that = this;
      axios.post(global.api.carRecharge.order,{
        uuid: localStorage.getItem('carWashUuid'),
        recharge_id: that.pick,
      })

      .then(function(res){

        console.log("pay then");
        console.log(res);
        
        if (res.data.code == 0) {

          window.location.href = "/app/index.php?i=2&c=entryApi&m=yimi_car&do=recharge&op=orderPay&uuid="+localStorage.getItem('carWashUuid')+"&orderid="+res.data.data.id

        }

      })

      .catch(function(res){

        console.log("pay catch");
        console.log(res);

      })

    },

    // 获取数据
    getInfo () {

      var that = this;

      axios.get(global.api.carRecharge.list,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })

      .then(function(res){
        
        console.log("getInfo then");
        console.log(res);
        that.list = res.data.data;
        that.pick = res.data.data[0].id;
        that.total = res.data.data[0].money;
        // that.total = res.data.data[0].money;
        if (res.data.data[0].isdiscount == 0) {
          // that.present = '无';
        } else {
          that.present = res.data.data[0].desc;
        }

      })

      .catch(function(res){
        console.log("getInfo catch");
        console.log(res);
      })

    }
  },
  watch: {

    pick: function (newVal,oldVal) {

      var that = this;

      if (oldVal != newVal) {
      
        for (var i=0;i<that.list.length;i++) {
      
          if (newVal == that.list[i].id && that.list[i].isdiscount != 0) {
      
            that.present = that.list[i].desc;
            that.total = that.list[i].money;
      
          } else if (newVal == that.list[i].id && that.list[i].isdiscount == 0) {
            
            that.total = that.list[i].money;
         
            that.present = '';
      
          }
      
        }
      
      }
      
    },
  }
}
</script>
  
<style scoped>
  .recharge{
    text-align: left;
  }
  .recharge_shell {
    /*width: 90%;*/
    margin: 0 auto 1rem;
    background-color: #fff;
    padding: 1rem 5%;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .recharge_subtit {
    line-height: 2rem;
    padding-left: 0.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
  }
  .recharge_main {
    padding-left: 2rem;
    line-height: 2.5rem;
  }
  .recharge_give{
    padding-left: 2rem;
    margin-top: 1rem;
  }
  .recharge_buy{
    /*width: 90%;*/
    padding: 0 5%;
    background-color: #fff;
  }
  .recharge_buy_subtit{
    line-height: 3.8rem;
    border-bottom: 1px solid #B3B3B4;
    font-size: 1.1rem;
    color: #2ecc80;
    padding-left: 1rem;
  }
  .recharge_buy_all{
    line-height: 4.3rem;
    padding-left: 1rem;
  }
  .recharge_buy_all span{
    font-size: 1.3rem;
  }
  .recharge_btn{
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #19C674;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  .recharge_btn:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_center{
    justify-content: space-between;
    align-items: center;
  }
  .start_center{
    justify-content: flex-start;
    align-items: flex-start;
  }
  .start_end{
    justify-content: flex-start;
    align-items: flex-end;
  }
</style>
